<template>
  <div id="userLayout" :class="['user-layout-wrapper', device]">
    <div class="container">
      <div class="header">
        <a href="/">
          <img :src="logoUrl" class="logo" alt="logo">
          <span class="title">{{simplyName}}</span>
        </a>
      </div>
      <route-view></route-view>
    </div>

    <!--<div class="footer">-->
    <!--<div class="copyright">-->
    <!--Copyright &copy; 2020 {{simplyName}}版权所有-->
    <!--</div>-->
    <!--</div>-->
  </div>
</template>

<script>
import RouteView from './RouteView'
import { mixinDevice } from '@/utils/mixin.js'

export default {
  name: 'UserLayout',
  components: { RouteView },
  mixins: [mixinDevice],
  data () {
    return {
      logoUrl: window._CONFIG.logo_url || process.env.BASE_URL + 'logo.svg',
      simplyName: window._CONFIG.simply_name || this.$t('m.logo.simply_name'),
    }
  },
  mounted () {
    document.body.classList.add('userLayout')
  },
  beforeDestroy () {
    document.body.classList.remove('userLayout')
  },
}
</script>

<style lang="less" scoped>
#userLayout.user-layout-wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../../assets/login-18.jpg");
  background-size: cover;

  &.mobile {
    .container {
      .main {
        max-width: 368px;
        width: 98%;
      }
    }
  }

  .container {
    width: 550px;
    border-radius: 2px;
    background: rgb(255 255 255) !important;
    padding: 25px 25px 5px 25px;
    box-shadow: 0 15px 25px rgba(0,0,0,.3) !important;

    a {
      text-decoration: none;
    }

    .header {
      height: 44px;
      line-height: 44px;
      text-align: center;
      margin-bottom: 30px;

      .badge {
        position: absolute;
        display: inline-block;
        line-height: 1;
        vertical-align: middle;
        margin-left: -12px;
        margin-top: -10px;
        opacity: 0.8;
      }

      .logo {
        height: 44px;
        vertical-align: top;
        margin-right: 16px;
        border-style: none;
      }

      .title {
        font-size: 28px;
        color: rgba(0, 0, 0, .85);
        // font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-family: "Chinese Quote", -apple-system,BlinkMacSystemFont,"微软雅黑","Helvetica Neue","Helvetica","Segoe UI","Arial,Roboto","PingFang SC","miui","Hiragino Sans GB",sans-serif;
        font-weight: 600;
        position: relative;
        top: 2px;
      }
    }

    .desc {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .main {
      min-width: 260px;
      width: 500px;
      margin: 0 auto;
    }
  }

  .footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 0 16px;
    margin: 48px 0 24px;
    text-align: center;

    .links {
      margin-bottom: 8px;
      font-size: 12px;

      a {
        color: #fff;
        transition: all 0.3s;

        &:not(:last-child) {
          margin-right: 40px;
        }
      }
    }

    .copyright {
      color: #fff;
      font-size: 12px;
    }
  }
}
</style>
